
<template>
  <div class="reports-container">
    <!-- 顶部导航 -->
    <el-menu
      mode="horizontal"
      :router="true"
      :default-active="activeMenu"
      class="reports-menu"
    >
      <el-menu-item index="/reports/kpi">
        <el-icon><DataLine /></el-icon>
        KPI指标
      </el-menu-item>
      <el-menu-item index="/reports/business-intelligence">
        <el-icon><TrendCharts /></el-icon>
        商业智能
      </el-menu-item>
      <el-menu-item index="/reports/custom">
        <el-icon><Files /></el-icon>
        自定义报表
      </el-menu-item>
    </el-menu>

    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>报表中心</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentMenuTitle }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 子路由出口 -->
    <div class="reports-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>

    <!-- 报表设置抽屉 -->
    <el-drawer
      v-model="settingsDrawer"
      title="报表设置"
      direction="rtl"
      size="400px"
    >
      <div class="settings-content">
        <h4>基本设置</h4>
        <el-form label-position="top">
          <el-form-item label="默认时间范围">
            <el-select v-model="settings.defaultTimeRange" class="w-full">
              <el-option label="今日" value="today" />
              <el-option label="本周" value="week" />
              <el-option label="本月" value="month" />
              <el-option label="本季度" value="quarter" />
              <el-option label="本年" value="year" />
            </el-select>
          </el-form-item>

          <el-form-item label="自动刷新间隔">
            <el-select v-model="settings.refreshInterval" class="w-full">
              <el-option label="不自动刷新" value="0" />
              <el-option label="每5分钟" value="300" />
              <el-option label="每15分钟" value="900" />
              <el-option label="每30分钟" value="1800" />
              <el-option label="每小时" value="3600" />
            </el-select>
          </el-form-item>

          <el-form-item label="导出格式">
            <el-checkbox-group v-model="settings.exportFormats">
              <el-checkbox label="excel">Excel</el-checkbox>
              <el-checkbox label="pdf">PDF</el-checkbox>
              <el-checkbox label="csv">CSV</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>

        <el-divider />

        <h4>通知设置</h4>
        <el-form label-position="top">
          <el-form-item label="报表完成通知">
            <el-switch v-model="settings.notifyOnComplete" />
          </el-form-item>

          <el-form-item label="异常数据提醒">
            <el-switch v-model="settings.notifyOnAnomaly" />
          </el-form-item>

          <el-form-item label="通知方式">
            <el-checkbox-group v-model="settings.notificationMethods">
              <el-checkbox label="email">邮件</el-checkbox>
              <el-checkbox label="sms">短信</el-checkbox>
              <el-checkbox label="weixin">微信</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div style="flex: auto">
          <el-button @click="resetSettings">恢复默认</el-button>
          <el-button type="primary" @click="saveSettings">
            保存设置
          </el-button>
        </div>
      </template>
    </el-drawer>

    <!-- 悬浮操作按钮 -->
    <div class="floating-actions">
      <el-button-group>
        <el-button 
          type="primary" 
          circle
          @click="settingsDrawer = true"
        >
          <el-icon><Setting /></el-icon>
        </el-button>
        <el-button 
          type="success" 
          circle
          @click="createReport"
        >
          <el-icon><Plus /></el-icon>
        </el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  DataLine,
  TrendCharts,
  Files,
  Setting,
  Plus
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 当前激活的菜单项
const activeMenu = computed(() => route.path)

// 当前菜单标题
const currentMenuTitle = computed(() => {
  const menuTitles = {
    '/reports/kpi': 'KPI指标',
    '/reports/business-intelligence': '商业智能',
    '/reports/custom': '自定义报表'
  }
  return menuTitles[route.path] || '报表中心'
})

// 设置抽屉
const settingsDrawer = ref(false)

// 报表设置
const settings = ref({
  defaultTimeRange: 'month',
  refreshInterval: '900',
  exportFormats: ['excel', 'pdf'],
  notifyOnComplete: true,
  notifyOnAnomaly: true,
  notificationMethods: ['email', 'weixin']
})

// 重置设置
const resetSettings = () => {
  settings.value = {
    defaultTimeRange: 'month',
    refreshInterval: '900',
    exportFormats: ['excel', 'pdf'],
    notifyOnComplete: true,
    notifyOnAnomaly: true,
    notificationMethods: ['email', 'weixin']
  }
  ElMessage.success('已恢复默认设置')
}

// 保存设置
const saveSettings = () => {
  ElMessage.success('设置已保存')
  settingsDrawer.value = false
}

// 创建报表
const createReport = () => {
  router.push('/reports/custom/create')
  ElMessage.success('请选择报表类型')
}
</script>

<style scoped>
.reports-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.reports-menu {
  border-bottom: solid 1px var(--el-menu-border-color);
  padding: 0 20px;
}

.breadcrumb-container {
  padding: 16px 20px;
  background-color: var(--el-bg-color-page);
  border-bottom: 1px solid var(--el-border-color-light);
}

.reports-content {
  flex: 1;
  overflow: auto;
  background-color: var(--el-bg-color-page);
  position: relative;
}

/* 路由切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.floating-actions {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 100;
}

.settings-content {
  padding: 20px;
}

.settings-content h4 {
  margin: 16px 0;
  color: var(--el-text-color-primary);
}

.w-full {
  width: 100%;
}

:deep(.el-menu-item) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu-item.is-active) {
  font-weight: 500;
}
</style>